import {LitElement, css, html} from "lit";

const NODE_TYPE_APPLY = 0;
const NODE_TYPE_APPROVE = 1;
const NODE_TYPE_COPY = 2;
const NODE_TYPE_CONDITION = 3;
const NODE_TYPE_BRANCH = 4;
const DEFAULT_CLS_PREFIX = "workflow";

function randomId(e) {
    //形参e,需要产生随机字符串的长度
    //如果没有传参，默认生成32位长度随机字符串
    e = e || 32;
    //模拟随机字符串库
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.length,//字符串t的长度，随机数生成最大值
        n = "";
    for (let i = 0; i < e; i++) {
        //随机生成长度为e的随机字符串拼接
        n += t.charAt(Math.floor(Math.random() * a));
    }
    //返回随机组合字符串
    return n
}

const data = {
    id: "01",
    name: "发起人",
    type: NODE_TYPE_APPLY,
    flowPermission: {},
    next: {
        id: "02",
        name: "抄送人",
        type: NODE_TYPE_COPY,
        next: {
            id: "03",
            name: "审核人",
            type: NODE_TYPE_APPROVE,
            next: {
                id: "04",
                name: "路由",
                type: NODE_TYPE_BRANCH,
                next: {
                    id: "05",
                    name: "抄送人",
                    type: NODE_TYPE_COPY,
                    next: null,
                },
                children: [
                    {
                        id: "0401",
                        name: "条件1",
                        type: NODE_TYPE_CONDITION,
                        next: {
                            id: "040101",
                            name: "审核人",
                            type: NODE_TYPE_APPROVE,
                            next: null,
                        },
                    },
                    {
                        id: "0402",
                        name: "条件2",
                        type: NODE_TYPE_CONDITION,
                        next: null,
                    },
                    ,
                    {
                        id: "0403",
                        name: "条件2",
                        type: NODE_TYPE_CONDITION,
                        next: null,
                    },
                ],
            },
        },
    },
}



const BASE_PROPERTIES = {
    node: Object,
    clsPrefix: String,
}
class FlowNodeElement extends LitElement {
    static get properties() {
        return BASE_PROPERTIES;
    }
    addNode(e) {
        this.dispatchEvent(new CustomEvent("add-node"));
    }
}

class ApplyNodeElement extends FlowNodeElement {

    static get properties() {
        return {
            ...BASE_PROPERTIES,
            apply: String,
        }
    }
    render() {
        return html`
        <div class="node">
            <div class="title">
                <span>${this.node.name}</span>
            </div>
            <div class="body">
                <span>${this.node.id}</span>
            </div>
        </div>
        <div @click="${this.addNode}">addNode</div>
        `
    }
    static styles = css`
      .node {
        background-color: #fff;
        border:1px solid #ccc;
      }
      .title {
        background-color: #0cec65;
      }
      .body {
        
      }
    `
}

class ApproveNodeElement extends FlowNodeElement {
    render() {
        return html`<div>
            <span>${this.node.id}</span>
            <span>${this.node.name}</span>
            <span>${this.clsPrefix}</span>
            <div @click="${this.addNode}">addNode</div>
        </div>`
    }
}

class BranchNodeElement extends FlowNodeElement {
    render() {
        return html`
            <div>
            <span>${this.node.id}</span>
            <span>${this.node.name}</span>
            <span>${this.clsPrefix}</span>
            <div @click="${this.addNode}">addNode</div>
        </div>
        `
    }
}

class CopyNodeElement extends FlowNodeElement {
    render() {
        return html`<div>
            <span>${this.node.id}</span>
            <span>${this.node.name}</span>
            <span>${this.clsPrefix}</span>
            <div @click="${this.addNode}">addNode</div>
        </div>`
    }
}
class ConditionNodeElement extends FlowNodeElement {
    render() {
        return html`<div>
            <span>${this.node.id}</span>
            <span>${this.node.name}</span>
            <span>${this.clsPrefix}</span>
            <div @click="${this.addNode}">addNode</div>
        </div>`
    }
}

class WorkFlowElement extends FlowNodeElement {

    addNode(e) {
        const next = this.node.next;
        this.node.next = {id:randomId(4),
            name: "抄送人",
            type: NODE_TYPE_COPY,next:next};
        // e.stopPropagation();
        this.requestUpdate();

    }

    render() {
        console.log("render", this.node);
        if(!this.node){
            return html``;
        }
        let comp;
        switch (this.node.type) {
            case 0:
                comp = html`<apply-node-element @add-node="${this.addNode}" .node="${this.node}" clsPrefix="${this.clsPrefix}">
                    
                </apply-node-element>`;
                break;
            case 1:
                comp = html`<approve-node-element @add-node="${this.addNode}" .node="${this.node}" clsPrefix="${this.clsPrefix}">

                </approve-node-element>`;
                break;
            case 2:
                comp = html`<copy-node-element @add-node="${this.addNode}" .node="${this.node}" clsPrefix="${this.clsPrefix}">

                </copy-node-element>`;
                break;
            case 3:
                comp = html`<condition-node-element @add-node="${this.addNode}" .node="${this.node}" clsPrefix="${this.clsPrefix}">
 
                </condition-node-element>`;
                break;
            case 4:
                comp = html`<branch-node-element @add-node="${this.addNode}" .node="${this.node}" clsPrefix="${this.clsPrefix}">
                </branch-node-element>`;
                break;
            default:
                comp = html``;
        }
        return html`
            ${comp}
        ${this.node.next?
            html`<work-flow-element .node="${this.node.next}" clsPrefix="${this.clsPrefix}"></work-flow-element>`:
            html``}
                `;
    }
}




export {data,FlowNodeElement, ApplyNodeElement,
    ApproveNodeElement,CopyNodeElement,
    ConditionNodeElement, BranchNodeElement, WorkFlowElement};
export {NODE_TYPE_COPY, NODE_TYPE_APPROVE, NODE_TYPE_CONDITION, NODE_TYPE_BRANCH,NODE_TYPE_APPLY,DEFAULT_CLS_PREFIX};
window.customElements.define("flow-node-element", FlowNodeElement);
window.customElements.define("apply-node-element", ApplyNodeElement);
window.customElements.define("approve-node-element", ApproveNodeElement);
window.customElements.define("copy-node-element", CopyNodeElement);
window.customElements.define("condition-node-element", ConditionNodeElement);
window.customElements.define("branch-node-element", BranchNodeElement);
window.customElements.define("work-flow-element", WorkFlowElement);
